<template>
  <a-table :columns="columns" :data-source="data">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          序号
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>
      <template v-else-if="column.key === 'block'">
        <span>
          <!-- <a-tag v-for="tag in record.tags" :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
            {{ tag.toUpperCase() }}
          </a-tag> -->
        </span>
      </template>
      <template v-else-if="column.key === 'over'">
        <a-switch v-model:checked="record.isVip" />
        {{ record.isVip }}
        <!-- <span>
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            More actions
            <down-outlined />
          </a>
        </span> -->
      </template>
    </template>
  </a-table>
  <!-- 

        name: number,
    block: number,
    type: string,
    Vipname: string,
    grade: string,
    number: number,
    consume: string,
    balance: string,
    save: string,
    score: string,
    begin: string,
    over: string,
     -->
</template>

<script lang="ts">
//#region 
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
const columns = [
  {
    name: '序号',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '卡号',
    dataIndex: 'block',
    key: 'block',
  },
  {
    title: '会员类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '会员等级',
    dataIndex: 'Vipname',
    key: 'Vipname',
  },
  {
    title: '会员姓名',
    dataIndex: 'grade',
    key: 'grade',
  },
  {
    title: '手机号码',
    dataIndex: 'number',
    key: 'number',
  }, {
    title: '累计消费',
    dataIndex: 'Vipname',
    key: 'Vipname',
  }, {
    title: '储存余额',
    dataIndex: 'consume',
    key: 'consume',
  }, {
    title: '累计储值',
    dataIndex: 'balance',
    key: 'balance',
  }, {
    title: '积分',
    dataIndex: 'save',
    key: 'save',
  }, {
    title: '开卡时间',
    dataIndex: 'score',
    key: 'score',
  }, {
    title: '到期时间',
    dataIndex: 'begin',
    key: 'begin',
  }, {
    title: '会员状态',
    dataIndex: 'over',
    key: 'over',
  }, {
    title: '操作',
    dataIndex: 'Vipname',
    key: 'Vipname',
  },
];


// const data = [
//   {
//     key: '1',
//     name: 'John Brown',
//     age: 32,
//     address: 'New York No. 1 Lake Park',
//     tags: ['nice', 'developer'],
//   },
//   {
//     key: '2',
//     name: 'Jim Green',
//     age: 42,
//     address: 'London No. 1 Lake Park',
//     tags: ['loser'],
//   },
//   {
//     key: '3',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//   },
// ];
//#endregion
import { ChengSaiJie } from "@/api/VipApi"
import { onMounted, watchEffect, reactive, toRefs, ref } from "vue"
export default defineComponent({
  components: {
    SmileOutlined,
    DownOutlined,
  },
  setup() {
    const getAll = reactive({
      arr: [],
      total: 0,  //表示总条数
      params: {
        Vipname: '', //需要搜索的内容
        page: 1,  //当前页
        pagesize: 10, //一页显示多少条
      }
    })
    let state = reactive({
      data: []
    })

    // const checked = ref<boolean>(false);

   


      watchEffect(() => {
        ChengSaiJie(getAll.params).then((res: any) => {
          state.data = res.data
          
        })
      })

    return {
      ...toRefs(state),
      columns,
    };
  },
});
</script>
  
  